<!DOCTYPE html>
<html>
<head>
  <meta content="IE=11.0000" http-equiv="X-Ua-Compatible">
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
  <title>工作台</title>
  <!--region 引入公用js和css -->
  <link href="../assets/plugins/animate/animate.css" rel="stylesheet">
  <link href="../assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/base/css/components.css" rel="stylesheet" id="style_components" type="text/css"/>
  <link href="../assets/base/css/plugins.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/ditop/layout.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
  <link href="../assets/plugins/bootstrap-table/extensions/tree-column/bootstrap-table-tree-column.css" rel="stylesheet">
  <link href="../assets/plugins/bootstrap-toastr/toastr.css" rel="stylesheet">
  <link rel="stylesheet" href="../assets/plugins/sweetalert/sweetalert.css">
  <link rel="stylesheet" href="../assets/plugins/layer/theme/default/layer.css">
  <link href="../assets/plugins/select2/css/select2.min.css" rel="stylesheet">
  <link href="../assets/plugins/icheck/skins/flat/aero.css" rel="stylesheet">
  <link href="../assets/ditop/ditop.css" rel="stylesheet">
  <link href="../assets/ditop/style/ztree/style9/treestyle.css" rel="stylesheet">
  <link href="../assets/plugins/bootstrap-touchspin/bootstrap.touchspin.css" rel="stylesheet">
  <link href="../assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css"/>
  <script src="../assets/plugins/jquery/jquery.min.js"></script>
  <script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
  <script src="../assets/plugins/bootstrap-toastr/toastr.js"></script>
  <script src="../assets/plugins/art-template/template.js"></script>
  <script src="../assets/plugins/layer/layer.js"></script>
  <script src="../assets/ditop/ditop.js"></script>
  <!--endregion-->

  <link href="../assets/module/gcjsy/css/public.css" rel="stylesheet">
  <link href="../assets/module/gcjsy/css/workbench2.css" rel="stylesheet">
 <!--The world has kissed my soul with its pain, asking for its return in songs.-->
  <script src="../assets/module/gcjsy/js/echarts.min.js"></script>
</head>

<body class="min1280">
<div class="ztc-wrapper">

  <div class="head-wrapper flex-s">
    <div class="logo">
        <a href="#">
        <img src="../assets/images/logo2.png" alt="">
        <span>合肥市建筑垃圾运输管理子系统</span>
      </a>
    </div>
    <div class="logo-right text-right pull-right">
      <span class="logo-rb">欢迎你，合肥市城管局   闫肖建</span>

      <a class="head-ic" id="message" href="#"><i class="dtFont dtFont-xiaoxi"></i><small>999</small></a>
      <a class="head-ic" href="#"><i class="dtFont dtFont-shezhimima1"></i></a>
      <a class="head-ic" href="#"><i class="dtFont dtFont-tuichudenglu"></i></a>


    </div>





  </div>

  <div class="body-wrapper PingFang">

    <div class="w-banner margin-bottom-15 clearfix">
      <div class="person-b pull-left">
        <div class="person-bImg">
          <img src="../assets/images/piso.png" alt="">
        </div>
        <div class="person-bText">
          <h3>早安 胡皓，开始你一天的工作吧！22</h3>
          <span>04/26 辛丑年三月十五</span>
        </div>
        <div class="person-bWeather">
          <iframe width="232" height="80" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=8&icon=1"></iframe>
        </div>
      </div>
      <div class="person-r pull-right">
        <ul class="person-rList">
          <li class="person-rL-item">
            <p>本周办证申请</p>
            <span>10</span>
          </li>
          <li class="person-rL-item">
            <p>审核中</p>
            <span>36</span>
          </li>
          <li class="person-rL-item">
            <p>已完成</p>
            <span>199</span>
          </li>
        </ul>
      </div>

    </div>

    <div class="sasd"></div>
    <div class="clearfix padding-lr-16">
      <div class="wu-left">
        <div class="sx-block margin-bottom-15">
          <div class="sx-block-t">
            <span>车辆信息统计</span>
          </div>
          <div class="sx-block-b myHeight" style="height: 252px;">


            <div class="padding-20 clearfix">

              <div class="wq-echarts" id="wq-echarts">

              </div>


              <div class="wq-banner">

                <section>
                  <i class="dtFont dtFont-tonghangzheng" style="color: rgba(2, 171, 193, .3)"></i>
                  <p class="wq-ban-text">已办证车辆</p>
                  <p class="wq-ban-num">89</p>
                </section>

                <section>
                  <i class="dtFont dtFont-tonghangzheng" style="color: rgba(214, 217, 224, .8)"></i>
                  <p class="wq-ban-text">未办证车辆</p>
                  <p class="wq-ban-num">23</p>
                </section>

                <section>
                  <i class="dtFont dtFont-jiashiyuanguanli" style="color: rgba(255, 89, 29, .3)"></i>
                  <p class="wq-ban-text">未绑定驾驶员车辆</p>
                  <p class="wq-ban-num">2</p>
                </section>

                <section>
                  <i class="dtFont dtFont-icon_jiechu" style="color: rgba(195, 211, 255, .9)"></i>
                  <p class="wq-ban-text">借出车辆</p>
                  <p class="wq-ban-num">11</p>
                </section>
              </div>


            </div>



          </div>
        </div>


        <div class="sx-block">
          <div class="sx-block-t">
            <span>运输审批登记信息<font class="blue">（3）</font></span>
          </div>
          <div class="sx-block-b myHeight" style="height: 357px;">

            <ul class="wq-list">
              <li class="wq-list-item">
                <a href="#">
                  <h3 class="margin-bottom-5">
                    <span>天门湖公租房三期</span>
                    <span class="wq-small">2021-04-06 至 2021-04-30 20:00-04:00</span>
                    <span class="reminder reminder-small inline-block" style="font-weight: normal">
                      运输审批登记还有 3 天即将过期，请及时续期
                    </span>
                  </h3>
                  <div>
                    消纳场：庐州公园（庐阳区段）一期西区工程绿化回填、庐阳区2017年第一批次城乡建设用地增减挂钩、蓝光半岛楼基
                    础回填</div>
                </a>
              </li>
              <li class="wq-list-item">
                <a href="#">
                  <h3 class="margin-bottom-5">
                    <span>天门湖公租房三期</span>
                    <span class="wq-small">2021-04-06 至 2021-04-30 20:00-04:00</span>
                  </h3>
                  <div>
                    消纳场：庐州公园（庐阳区段）一期西区工程绿化回填、庐阳区2017年第一批次城乡建设用地增减挂钩、蓝光半岛楼基
                    础回填</div>
                </a>
              </li>
              <li class="wq-list-item">
                <a href="#">
                  <h3 class="margin-bottom-5">
                    <span>天门湖公租房三期</span>
                    <span class="wq-small">2021-04-06 至 2021-04-30 20:00-04:00</span>
                    <span class="reminder reminder-small inline-block" style="font-weight: normal">
                      运输审批登记还有 3 天即将过期，请及时续期
                    </span>
                  </h3>
                  <div>
                    办证车辆：皖AB4269，皖AB4207，皖AB7839，皖AB4948，皖AB7787，皖AB7826，皖AB7651，皖AB3357，皖AB7035，皖AB7066，皖AB9817，皖AB9916，皖AB9922
                  </div>
                </a>
              </li>
            </ul>

          </div>
        </div>



      </div>
      <div class="wu-right">
        <div class="sx-block margin-bottom-15">
          <div class="sx-block-t">
            <span>单车准运证<font class="blue">（3）</font></span>
          </div>
          <div class="sx-block-b myHeight" style="height: 680px;">

            <ul class="wq-list">
              <li class="wq-list-item">
                <a href="#">
                  <h3>天门湖公租房三期</h3>
                  <p>2021-04-06 至 2021-04-30 &nbsp;&nbsp;20:00-04:00</p>
                  <div>
                    办证车辆：皖AB4269，皖AB4207，皖AB7839，皖AB4948，皖AB7787，皖AB7826，皖AB7651，皖AB3357，皖AB7035，皖AB7066，皖AB9817，皖AB9916，皖AB9922
                  </div>
                </a>
              </li>
              <li class="wq-list-item">
                <a href="#">
                  <h3>天门湖公租房三期</h3>
                  <p>2021-04-06 至 2021-04-30 &nbsp;&nbsp;20:00-04:00</p>
                  <div>
                    办证车辆：皖AB4269，皖AB4207，皖AB7839，皖AB4948，皖AB7787，皖AB7826，皖AB4269，皖AB4207，皖AB7839，皖AB4948，皖AB7787，皖AB7826，皖AB7651，皖AB3357，皖AB7035，皖AB7066，皖AB9817，皖AB9916，皖AB9922</div>
                </a>
              </li>
              <li class="wq-list-item">
                <a href="#">
                  <h3>天门湖公租房三期</h3>
                  <p>2021-04-06 至 2021-04-30 &nbsp;&nbsp;20:00-04:00</p>
                  <div>
                    办证车辆：皖AB4269，皖AB4207，皖AB7839，皖AB4948，皖AB7787，皖AB7826，皖AB7651，皖AB3357，皖AB7035，皖AB7066，皖AB9817，皖AB9916，皖AB9922
                  </div>
                </a>
              </li>
            </ul>

          </div>
        </div>
      </div>
    </div>




  </div>



</div>



<!--region 引入公用js和css -->
<script src="../assets/plugins/sweetalert/sweetalert.min.js"></script>
<script src="../assets/plugins/jquery.blockui.min.js"></script>
<script src="../assets/plugins/js.cookie.min.js"></script>
<script src="../assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="../assets/plugins/jquery.blockui.min.js"></script>
<script src="../assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="../assets/plugins/bootstrap-touchspin/bootstrap.touchspin.js"></script>
<script src="../assets/plugins/moment.min.js"></script>
<script src="../assets/plugins/bootstrap-daterangepicker/daterangepicker.min.js"></script>
<script src="../assets/plugins/counterup/jquery.waypoints.min.js"></script>
<script src="../assets/plugins/counterup/jquery.counterup.min.js"></script>
<script src="../assets/plugins/fullcalendar/fullcalendar.js"></script>
<script src="../assets/plugins/horizontal-timeline/horizontal-timeline.js"></script>
<script src="../assets/plugins/jquery.sparkline.min.js"></script>
<script src="../assets/plugins/select2/js/select2.js"></script>
<script src="../assets/plugins/select2/js/i18n/zh-CN.js"></script>
<script src="../assets/plugins/ztree/jquery.ztree.all.js"></script>
<script src="../assets/plugins/jquery-form/jquery.form.js"></script>
<script src="../assets/plugins/jquery-validator/jquery.placeholder.min.js"></script>
<script src="../assets/plugins/jquery-validator/jquery.validate.js"></script>
<script src="../assets/plugins/jquery-validator/jquery.validate.custom.js"></script>
<script src="../assets/plugins/jquery-validator/localization/messages_zh.js"></script>
<script src="../assets/plugins/jquery-validator/additional-methods.js"></script>
<script src="../assets/plugins/bootstrap-growl/jquery.bootstrap-growl.js"></script>
<script src="../assets/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="../assets/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="../assets/plugins/bootstrap-table/extensions/tree-column/bootstrap-table-tree-column.js"></script>
<script src="../assets/base/scripts/app.js"></script>
<script src="../assets/base/scripts/theme.js"></script>
<script src="../assets/ditop/ditop-addition.js"></script>
<script src="../assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script src="../assets/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"
        type="text/javascript"></script>
<script type="text/javascript" src="../assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"
        charset="UTF-8"></script>
<script type="text/javascript"
        src="../assets/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
        charset="UTF-8"></script>
<script src="../assets/plugins/jquery-validator/jquery.validate.custom.js"></script>
<script src="../assets/ditop/layout.js"></script>
<!--endregion-->
<script src="../assets/module/gcjsy/js/content.js"></script>
<!--<script src="../assets/module/gcjsy/js/chartInit.js"></script>-->
<script>
    var myChart = echarts.init(document.getElementById('wq-echarts'));
    var zData = [
        {value: 36, name: '借调车辆'},
        {value: 35, name: '自有车辆'}
    ];
    var option = {
        tooltip: {
            trigger: 'item'
        },
        color:['#8C68CB', '#02ABC1'],
        legend: {
            bottom: '1%',
            left: 'center',
            icon:'circle',
            formatter:function (name) {
                let thisItem = zData.filter(item=>item.name === name);
                return "{a|"+name+"} {b|"+thisItem[0].value+"}"
            },
            temWidth:8,
            itemHeight:8,
            itemGap:40,
            textStyle:{
                rich:{
                    a:{
                        fontSize:14,
                        color:"#737983"
                    },
                    b:{
                        fontSize:16,
                        display:"inlineBlock",
                        fontWeight:"bold",
                        color:"#333",
                        marginLeft:15
                    }
                }
            }

        },
        series: [
            {
                name: '车辆状况',
                type: 'pie',
                radius: ['75%', '100%'],
                clockwise:false,
                top:10,
                bottom:40,
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center',
                    normal: {
                        show: true,
                        position:"center",
                        formatter:function(data){
                            let total = 0;
                            zData.forEach(item=>{
                                total = total + item.value
                            });
                            return "{a|"+total+"}\n{b|在库车辆}"
                        },
                        rich:{
                            a:{
                                fontSize:32,
                                fontWeight:"bold",
                                color:"#333",
                                marginBottom:20
                            },
                            b:{
                                fontSize:14,
                                color:"#737983"
                            }
                        }
                    }
                },
                labelLine: {
                    show: false
                },
                data: zData
            }
        ]
    };
    myChart.setOption(option, true);
    $(window).resize(function () {
        myChart.resize();
    });
</script>
</body>
</html>
